<!--
 * @Description: 选择年范围
 * @Author: huacong
 * @Date: 2020-11-11 09:48:16
 * @LastEditTime: 2020-11-11 15:32:54
 * @LastEditors: huacong
-->
<template lang="pug">
  span
    el-date-picker.mr5(
      style="width: 116px"
      :size="size"
      v-model="value1"
      type="year"
      placeholder="开始年"
      :picker-options="pickerOptions1"
    )
    el-date-picker(
      :size="size"
      v-model="value2"
      type="year"
      style="width: 116px"
      placeholder="结束年"
      :picker-options="pickerOptions2"
    )
</template>
<script>
import dayjs from 'dayjs'

export default {
  props: {
    size: {
      type: String,
      default: 'small'
    }
  },
  data () {
    return {
      value1: '',
      value2: '',
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  watch: {
    value1 (val) {
      const { formatDate } = this
      this.pickerOptions2 = {
        disabledDate (time) {
          return time.getTime() > Date.now() || time.getTime() < val.getTime()
        }
      }
      this.$emit('yearrangeChange', [formatDate(val), formatDate(this.value2)])
    },
    value2 (val) {
      const { formatDate } = this
      this.pickerOptions1 = {
        disabledDate (time) {
          return time.getTime() > Date.now() || time.getTime() > val.getTime()
        }
      }
      this.$emit('yearrangeChange', [formatDate(this.value1), formatDate(val)])
    }
  },
  methods: {
    formatDate (val) {
      return val ? dayjs(new Date(val)).format('YYYY') : ''
    }
  }
}
</script>
